<template>
  <div class="bottom-bg">
    <div class="top">
      <a href="https://weibo.com/chiaotunguniv?is_hot=1"
        ><i class="iconfont icon-xinlang"></i
      ></a>
      <a href="https://www.sjtu.edu.cn/dbcylj/index.html#"
        ><i class="iconfont icon-weixin"></i
      ></a>
    </div>
    <div class="model">
      <!-- 底部模块 -->
      <el-row style="padding:15px 0">
        <el-col :span="$store.state.device == 'pc' ? 8 : 24">
          <div class="left clearFix">
            <div class="items">
              <div>
                <a href="https://ddh11.sjtu.edu.cn/">
                  <img src="@/assets/images/20201029_104215_668.jpg" alt="" />
                  <p>中国共产党上海交通大学第十一次代表大会</p>
                </a>
              </div>
            </div>
            <div class="items">
              <div>
                <a href="http://sjtuztjy.sjtu.edu.cn/">
                  <img src="@/assets/images/20191010_014128_154.jpg" alt="" />
                  <p>“不忘初心、牢记使命”主题教育专题网</p>
                </a>
              </div>
            </div>
            <div class="items">
              <div>
                <a href="http://jd.sjtu.edu.cn/">
                  <img src="@/assets/images/20181213_130151_250.jpg" alt="" />
                  <p>焦点会</p>
                </a>
              </div>
            </div>
            <div class="items">
              <div>
                <a href="http://welcome.sjtu.edu.cn/">
                  <img src="@/assets/images/20181114_061432_161.png" alt="" />
                  <p>迎新网</p>
                </a>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="$store.state.device == 'pc' ? 8 : 24">
          <div class="center">
            <a
              href="https://www.sjtu.edu.cn/dbcylj/index.html#"
              target="_blank"
            >
              <img
                src="https://www.sjtu.edu.cn/resource/assets/img/svg/footer-logo.svg"
                alt=""
                class="school-icon"
              />
            </a>
            <a href="https://beian.miit.gov.cn/" target="_blank">
              <p class="report">沪ICP备05052060号 沪举报中心</p>
            </a>
            <a
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31009102000045"
              target="_blank"
            >
              <p>沪公安网备31009102000045</p>
            </a>
            <p>地址：上海市东川路800号</p>
            <p>邮编：200240</p>
            <p>查号：86-21-54740000</p>
          </div>
        </el-col>
        <el-col :span="$store.state.device == 'pc' ? 8 : 24">
          <div class="right clearFix">
            <ul>
              <li v-for="(item, index) in list1" :key="index">
                <a :href="item.path" target="_blank">{{ item.title }}</a>
              </li>
            </ul>
            <ul>
              <li v-for="(item, index) in list2" :key="index">
                <a :href="item.path" target="_blank">{{ item.title }}</a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        {
          title: "众筹科技2035",
          path: "https://advice2035.most.cn/"
        },
        {
          title: "综合信息",
          path: "http://info.sjtu.edu.cn/index.aspx"
        },
        {
          title: "图书馆",
          path: "http://www.lib.sjtu.edu.cn/"
        },
        {
          title: "校史馆",
          path: "http://museum.sjtu.edu.cn/"
        },
        {
          title: "视觉形象识别系统",
          path: "http://vi.sjtu.edu.cn/"
        },
        {
          title: "校友会",
          path: "http://alumni.sjtu.edu.cn/"
        },
        {
          title: "基金会",
          path: "http://foundation.sjtu.edu.cn/"
        }
      ],
      list2: [
        {
          title: "机关服务评议",
          path: "https://www.sjtu.edu.cn/opinion/index.html"
        },
        {
          title: "校园管理",
          path: "http://xygl.sjtu.edu.cn/"
        },
        {
          title: "本科生招生",
          path: "http://zsb.sjtu.edu.cn/"
        },
        {
          title: "研究生招生",
          path: "http://yzb.sjtu.edu.cn/"
        },
        {
          title: "学生就业",
          path: "http://www.job.sjtu.edu.cn/"
        },
        {
          title: "人才招聘",
          path: "http://join.sjtu.edu.cn/"
        },
        {
          title: "主页信息修改申请表",
          path: "http://www.sjtu.edu.cn/xcb/2_shenqingbiao.doc"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.bottom-bg {
  background-image: url("https://www.sjtu.edu.cn/resource/assets/img/svg/footDoorBG.svg");
  background-repeat: repeat;
}
.top {
  display: flex;
  padding: 10px 0;
  background-color: #dfdad2;
  justify-content: center;
  a {
    margin: 0 20px;
  }
  i {
    font-size: 16px;
    color: #888889;
  }
}
.model {
  width: $base-width;
  margin: 0 auto;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .left {
    .items {
      width: 50%;
      float: left;
      height: 80px;
      margin-bottom: 15px;
      padding: 0 7px;
      div {
        height: inherit;
        position: relative;
        a {
          display: block;
          height: 100%;
          position: relative;

          &:hover {
            &::after {
              background-color: rgba($color: #000000, $alpha: 0);
            }
          }
          &::after {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            content: " ";
            background-color: rgba($color: #000000, $alpha: 0.3);
            z-index: 5;
            transition: 0.3s;
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          p {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 0 5px;
            font-size: 10px;
            font-weight: 500;
            line-height: 14px;
            color: #ffffff;
            z-index: 6;
          }
        }
      }
    }
  }
  .center {
    padding: 15px 0;
    background-image: url("https://www.sjtu.edu.cn/resource/assets/img/svg/footDoor.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -30px;
    a {
      display: block;
      margin-bottom: 10px;
    }
    .school-icon {
      width: 30%;
      margin: 0 auto;
      display: block;
    }
    p {
      text-align: center;
      line-height: 16px;
      font-size: 10px;
    }
  }
  .right {
    @media only screen and (min-width: 480px) and (max-width: 1200px) {
      /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
      padding: 15px 0;
    }
    @media screen and (min-width: 320px) and (max-width: 480px) {
      /* 在这里写小屏幕设备的样式 */
      padding: 15px 0;
    }
    ul {
      width: 50%;
      float: left;
      padding: 0 15px;
      li {
        a {
          font-size: 10px;
          line-height: 16px;
          margin-bottom: 5px;
          display: block;
        }
      }
    }
  }
}
</style>
